<template>
  <a-drawer
    :title='title'
    :maskClosable='true'
    :width='drawerWidth'
    placement='right'
    :closable='true'
    @close='handleCancel'
    :visible='visible'
    style='height: 100%;'>

    <template slot='title'>
      <div style='width: 100%;'>
        <span>{{ title }}</span>
        <span style='display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right'>
          <a-button @click='toggleScreen' icon='appstore' style='height:20px;width:20px;border:0px'></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning='confirmLoading'>

      <a-form-model ref='form' :model='model' :rules='validatorRules'>
        <a-tabs v-model:activeKey='activeKey'>
          <a-tab-pane key='1' tab='基础信息'>
            <a-form-model-item label='姓名' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='name'>
              <a-input placeholder='请输入姓名' v-model='model.name' :readOnly='!!model.id' />
            </a-form-model-item>

            <a-form-model-item label='手机号码' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='mobilePhone'>
              <a-input placeholder='请输入手机号码' v-model='model.mobilePhone' />
            </a-form-model-item>

            <a-form-model-item label='工号' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='workNo'>
              <a-input placeholder='请输入工号' v-model='model.workNo' />
            </a-form-model-item>
            <a-form-model-item label='身份证号' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='cardNo'>
              <a-input placeholder='请输入身份证号' v-model='model.cardNo' />
            </a-form-model-item>

            <a-form-model-item label='职称' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='title'>
              <j-dict-select-tag
                placeholder='请选择职级'
                dictCode='doctor_level'
                v-model='model.title'
              />
            </a-form-model-item>

            <a-form-model-item label='职务' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='postCode'>
              <j-select-position-doctor placeholder='请选择职务' :multiple='false' v-model='model.postCode' />
            </a-form-model-item>

            <a-form-model-item label='医生类别' :labelCol='labelCol' :wrapperCol='wrapperCol' v-if="model.postCode=='1001'">
              <a-radio-group v-model='model.doctorType'>
                <a-radio value='西医'>西医</a-radio>
                <a-radio value='中医'>中医</a-radio>
              </a-radio-group>
            </a-form-model-item>

            <a-form-model-item label='学历' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='background'>
              <j-dict-select-tag
                placeholder='请选择职级'
                dictCode='background'
                v-model='model.background'
              />
            </a-form-model-item>

            <a-form-model-item label='身份' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-radio-group v-model='model.userIdentity'>
                <a-radio value='1'>普通用户</a-radio>
                <a-radio value='2'>上级</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label='合同性质'  :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-select v-model='model.positionAttr' placeholder='请选择 员工属性' default-value='0'>
                <a-select-option value='0'>在编</a-select-option>
                <a-select-option value='1'>合同工</a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item label='头像' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-image-upload class='avatar-uploader' text='上传' v-model='model.workImg' biz-path='img'></j-image-upload>
            </a-form-model-item>

<!--            <a-form-model-item label='出生日期' :labelCol='labelCol' :wrapperCol='wrapperCol'>-->
<!--              <a-date-picker-->
<!--                style='width: 100%'-->
<!--                placeholder='请选择生日'-->
<!--                v-model='model.birthday'-->
<!--                :format='dateFormat'-->
<!--                :getCalendarContainer='node => node.parentNode' />-->
<!--            </a-form-model-item>-->

<!--            <a-form-model-item label='性别' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='sex'>-->
<!--              <a-select v-model='model.sex' placeholder='请选择性别' :getPopupContainer='(target) => target.parentNode'>-->
<!--                <a-select-option :value='1'>男</a-select-option>-->
<!--                <a-select-option :value='0'>女</a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-model-item>-->

            <a-form-model-item label='邮箱' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='email'>
              <a-input placeholder='请输入邮箱' v-model='model.email' />
            </a-form-model-item>

          </a-tab-pane>
          <a-tab-pane key='2' tab='简介信息' force-render>
            <a-form-model-item label='专业擅长' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='professional'>
              <a-textarea placeholder='请输入专业擅长' v-model='model.professional' :auto-size='{ minRows: 2, maxRows: 5 }' />
              <div class='ant-form-explain'>注：100字符以内。</div>
            </a-form-model-item>
            <a-form-model-item label='个人简介' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='introduction'>
              <a-textarea placeholder='请输入个人简介' v-model='model.introduction' :auto-size='{ minRows: 3, maxRows: 6 }'  />
              <div class='ant-form-explain'>注：300字符以内。</div>
            </a-form-model-item>
            <a-form-model-item label='荣誉' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-textarea placeholder='请输入荣誉' v-model='model.honor' :auto-size='{ minRows: 3, maxRows: 6 }' />
            </a-form-model-item>
            <a-form-model-item label='职业经历描述' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-textarea placeholder='请输入职业经历描述' v-model='model.description'
                          :auto-size='{ minRows: 5, maxRows: 10 }' />
            </a-form-model-item>
          </a-tab-pane>
          <a-tab-pane key='3' tab='证件信息'>
            <a-row :gutter="24" style="margin-top: 65px;margin-bottom:50px;">
              <a-col :span="12">
                <a-form-model-item label="身份证正面" prop="fileList" :labelCol='labelCol' :wrapperCol='wrapperCol'>
                  <j-upload v-model="model.fileList"></j-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="身份证反面" prop="fileList" :labelCol='labelCol' :wrapperCol='wrapperCol'>
                  <j-upload v-model="model.fileList"></j-upload>
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24" style="margin-top: 65px;margin-bottom:50px;">
              <a-col :span="12">
                <a-form-model-item label="资格证1" prop="fileList" :labelCol='labelCol' :wrapperCol='wrapperCol'>
                  <j-upload v-model="model.fileList"></j-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="资格证2" prop="fileList" :labelCol='labelCol' :wrapperCol='wrapperCol'>
                  <j-upload v-model="model.fileList"></j-upload>
                </a-form-model-item>
              </a-col>
            </a-row>

          </a-tab-pane>

          <a-tab-pane key='4' tab='合同信息'>
            <a-row>
              <a-col :span="4"></a-col>
              <a-col :span="8">
                <a-form-model-item label="签订合同开始日期"  :labelCol='labelCol' :wrapperCol='wrapperCol'>
                  <a-date-picker showTime format="YYYY-MM-DD" v-model="model.contractStartTime" :disabled-date="disabledStartDate" style="width: 80px"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="签订合同结束日期" :labelCol='labelCol' :wrapperCol='wrapperCol'>
                  <a-date-picker showTime format="YYYY-MM-DD" v-model="model.contractEndTime"  :disabled-date="disabledEndDate" style="width: 80px"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="4"></a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>

      </a-form-model>

    </a-spin>


    <div class='drawer-bootom-button' v-show='!disableSubmit'>
      <a-popconfirm title='确定放弃编辑？' @confirm='handleCancel' okText='确定' cancelText='取消'>
        <a-button style='margin-right: .8rem'>取消</a-button>
      </a-popconfirm>
      <a-button @click='handleSubmit' type='primary' :loading='confirmLoading'>提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction, postAction, httpAction } from '@/api/manage'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import { disabledAuthFilter } from '@/utils/authFilter'
import { duplicateCheck, addDoctor, editDoctor, queryall } from '@/api/api'

export default {
  name: 'UserModal',
  components: {
    JDictSelectTag
  },
  data() {
    return {
      activeKey: '1',
      departDisabled: false, //是否是我的部门调用该页面
      roleDisabled: false, //是否是角色维护调用该页面
      modalWidth: 900,
      drawerWidth: 1024,
      modaltoggleFlag: true,
      confirmDirty: false,
      userId: '', //保存用户id
      disableSubmit: false,
      dateFormat: 'YYYY-MM-DD',
      validatorRules: {
        name: [{ required: true, message: '请输入名称!' },
          { validator: this.validateUsername }],
        password: [{
          required: true,
          pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
          message: '密码由8位数字、大小写字母和特殊符号组成!'
        },
          { validator: this.validateToNextPassword, trigger: 'change' }],
        confirmpassword: [{ required: true, message: '请重新输入登录密码!' },
          { validator: this.compareToFirstPassword }],
        title: [{ required: true, message: '请输入职称!' }],
        cardNo: [{ required: true, message: '请输入身份证号!' }],
        background: [{ required: true, message: '请输入学历!' }],
        postCode: [{ required: true, message: '请选择职务!' }],
        mobilePhone: [{ required: true, message: '请输入手机号!' }, { validator: this.validatePhone }],
        email: [{ validator: this.validateEmail }],
        roles: {},
        workNo: [{ required: true, message: '请输入工号' }, { validator: this.validateWorkNo }],
        professional: [{ required: true, message: '请输入专业擅长' }, { min: 10, max: 100, message: '长度在 10 到 100 个字符' }],
        introduction: [{ required: true, message: '请输入个人简介' }]
      },
      departIdShow: false,
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      uploadLoading: false,
      confirmLoading: false,
      headers: {},
      url: {
        fileUpload: window._CONFIG['domianURL'] + '/sys/common/upload',
        userId: '/sys/user/generateUserId' // 引入生成添加用户情况下的url
      },
      tenantsOptions: [],
      rolesOptions: [],
      nextDepartOptions: []
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }
    this.initRoleList()
  },
  computed: {
    uploadAction: function() {
      return this.url.fileUpload
    }
  },
  methods: {
    //只能选择当天日期后的时间
    disabledStartDate(current) {
      return current && current < moment().subtract(1, 'days')
    },
    disabledEndDate(endValue) {
      const startValue = this.model.startTime;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    disabledEndDate2(endValue) {
      const startValue = this.model.contractTime;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    add() {
      this.refresh()
      this.edit({ activitiSync: '1', userIdentity: 1 })
    },
    edit(record) {
      let that = this
      that.visible = true
      //根据屏幕宽度自适应抽屉宽度
      this.resetScreenSize()
      that.userId = record.id
      that.model = Object.assign({}, { selectedroles: '' }, record)
      //身份为上级显示负责部门，否则不显示
      if (this.model.userIdentity == 2) {
        this.departIdShow = true
      } else {
        this.departIdShow = false
      }

      if (record.hasOwnProperty('id')) {
        that.getUserRoles(record.id)
      }
      console.log('that.model=', that.model)
    },
    isDisabledAuth(code) {
      return disabledAuthFilter(code)
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = screenWidth - 200
      }
    },
    //初始化角色字典
    initRoleList() {
      // queryall().then((res) => {
      //   if (res.success) {
      //     this.rolesOptions = res.result.map((item, index, arr) => {
      //       let c = { label: item.roleName, value: item.id }
      //       return c
      //     })
      //     console.log('this.rolesOptions: ', this.rolesOptions)
      //   }
      // })
    },
    getUserRoles(userid) {
      queryUserRole({ userid: userid }).then((res) => {
        if (res.success) {
          this.model.selectedroles = res.result.join(',')
          console.log('that.model.selectedroles=', this.model.selectedroles)
        }
      })
    },
    backDepartInfo(info) {
      this.model.departIds = this.model.selecteddeparts
      this.nextDepartOptions = info.map((item, index, arr) => {
        let c = { label: item.text, value: item.value + '' }
        return c
      })
    },
    refresh() {
      this.userId = ''
      this.nextDepartOptions = []
      this.departIdShow = false
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.nextDepartOptions = []
      this.departIdShow = false
      this.$refs.form.resetFields()
    },
    moment,
    handleSubmit() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          that.model.birthday = that.moment(this.model.birthday).format('YYYY-MM-DD')
          let obj
          if (!this.model.id) {
            that.model.departId = that.model.selecteddeparts
            obj = addDoctor(this.model)
          } else {
            obj = editDoctor(this.model)
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
              that.close()
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    },
    validateToNextPassword(rule, value, callback) {
      const confirmpassword = this.model.confirmpassword
      if (value && confirmpassword && value !== confirmpassword) {
        callback('两次输入的密码不一样！')
      }
      if (value && this.confirmDirty) {
        this.$refs.form.validateField(['confirmpassword'])
      }
      callback()
    },
    compareToFirstPassword(rule, value, callback) {
      if (value && value !== this.model.password) {
        callback('两次输入的密码不一样！')
      } else {
        callback()
      }
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
          var params = {
            tableName: 'sys_user',
            fieldName: 'phone',
            fieldVal: value,
            dataId: this.userId
          }
          duplicateCheck(params).then((res) => {
            if (res.success) {
              callback()
            } else {
              callback('手机号已存在!')
            }
          })
        } else {
          callback('请输入正确格式的手机号码!')
        }
      }
    },
    validateEmail(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
          var params = {
            tableName: 'sys_user',
            fieldName: 'email',
            fieldVal: value,
            dataId: this.userId
          }
          duplicateCheck(params).then((res) => {
            console.log(res)
            if (res.success) {
              callback()
            } else {
              callback('邮箱已存在!')
            }
          })
        } else {
          callback('请输入正确格式的邮箱!')
        }
      }
    },
    validateUsername(rule, value, callback) {
      var params = {
        tableName: 'sys_user',
        fieldName: 'username',
        fieldVal: value,
        dataId: this.userId
      }
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback('用户名已存在!')
        }
      })
    },
    validateWorkNo(rule, value, callback) {
      var params = {
        tableName: 'sys_user',
        fieldName: 'work_no',
        fieldVal: value,
        dataId: this.userId
      }
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback('工号已存在!')
        }
      })
    },
    handleConfirmBlur(e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    },
    beforeUpload: function(file) {
      var fileType = file.type
      if (fileType.indexOf('image') < 0) {
        this.$message.warning('请上传图片')
        return false
      }
      //TODO 验证文件大小
    }

  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}

.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

/*【JTC-502】 添加用户两个滚动条*/
/deep/ .ant-drawer-body {
  padding-bottom: 53px;
}

</style>
